<template>
  <f7-page>
    <f7-block class="header">
      <div class="component-toolbar">
        <div class="component-back">
          <f7-link icon-f7="chevron_left" @click="handleBack"></f7-link>
        </div>
        <div class="component-message">
          <img src="static/img/ungrouped/message.png" alt="message-icon">
        </div>
      </div>
      <div class="user-info">
        <qm-user-info></qm-user-info>
      </div>
      <qm-register-list></qm-register-list>
    </f7-block>
    <div class="need-wrapper">
      <div class="title">
        <img src="static/img/ungrouped/memorandum.png" alt="memorandum" width="12">
        <span style="margin-left: 6px">待办事项</span>
      </div>
      <qm-entrust-card  class="use-entrust" v-for="i in 5" :key="i" afterTitle="12:15" title="构件检查" date="楼梯板-B-1  待入模检查" :splited="true"></qm-entrust-card>
    </div>
  </f7-page>
</template>

<script>
export default {
  name: "pre-component",
  methods: {
    handleBack() {
      this.$f7router.back();
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  margin: 0;
  padding: calc(34px * var(--ratio)) calc(25px * var(--ratio)) calc(30px * var(--ratio));
  // height: calc(720px * var(--ratio));
  background-image: url("../../../../static/img/ungrouped/bg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  border-bottom: calc(20px * var(--ratio)) solid #F1F6FD;

  .component-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .component-message {
      width: calc(42px * var(--ratio));
      height: calc(34px * var(--ratio));

      img {
        width: 100%;
      }
    }

    .component-back {
      .link {
        color: #fff;
      }
    }
  }

  .user-info {
    margin-top: calc(60px * var(--ratio));
  }
}

.need-wrapper {
  padding: calc(45px * var(--ratio)) calc(32px * var(--ratio));

  .title {
    margin-bottom: calc(26px * var(--ratio));
    display: flex;
    align-items: center;
  }

  .entrust-wrapper {
    box-shadow: 0 0 calc(14px * var(--ratio)) calc(2px * var(--ratio)) rgba(45, 135, 255, 0.18);
    border-radius: calc(10px * var(--ratio));
  }
}


::v-deep .entrust-wrapper.use-entrust .entrust-card .entrust-content .title-wrapper {
  margin-bottom: calc(30px * var(--ratio));
}
</style>
